@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #0077ff;
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
}

body {
  @apply bg-neutral-50 text-neutral-900 font-sans;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-primary-500 hover:bg-primary-600 text-white focus:ring-primary-500;
  }
  
  .btn-secondary {
    @apply btn bg-neutral-200 hover:bg-neutral-300 text-neutral-800 focus:ring-neutral-400;
  }
  
  .input {
    @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
  }
}